<template>
	<view class="cart">
		<view class="cartList">
			<view class="cartItem" @click="chekId(item)" v-for="item in cartList" :key="item.id">
				<!-- 选中框 -->
				<image :src="selectIds.includes(item.id)||item.idSelected ? '/static/img/select.png' : '/static/img/chenggong.png'" class="iconfont" mode=""></image>
				<!-- 商品信息 -->
				<view class="goodsItem">
					<image :src="item.listPicUrl" mode=""></image>
					<view class="goodsInfo">
						<view class="name">
							{{item.name}}
						</view>
						<view class="price">
							￥ {{item.retailPrice}}
						</view>
					</view>
				</view>
				<!-- 数量控制 -->
				<view class="countCtrl">
					<text class="sud" @click.stop="subGoodsItemMutations(item)">-</text>
					<text class="count">{{item.count}}</text>
					<text class="add" @click.stop="addGoodsItemMutations(item)">+</text>
				</view>
				
			</view>
		</view>
		<!-- 底部-->
		<view class="footer">
			<view class="left">
				<image src="/static/img/chenggong.png" class="iconfont" mode=""></image>
				<text>已选 {{getGoodsNum}}</text>
			</view>
			<view class="right">
				<text class="btn">合计：￥ {{getGoodsPrice}}</text>
				<text class="btn order">下单</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
		export default {
		data() {
			return {
				selectIds:[]
			};
		},
		mounted(){
			//this.$store.data.cart.cartList
		},
		methods:{
			...mapMutations('cart',['addGoodsItemMutations','subGoodsItemMutations'])
			,
			chekId(item) {
			    const index = this.selectIds.indexOf(item.id)
			    if (index > -1) {
			      // 已经存在，说明是取消选中
			      this.selectIds.splice(index, 1)
						item.idSelected=false
			    } else {
			      // 不存在，说明是新增选中
			      this.selectIds.push(item.id)
						item.idSelected=true
			    }
			  }
		},
		computed: {
			...mapState('cart', ['cartList']),
			getGoodsNum() {
				let num = 0;
				for (const cart of this.cartList) {
					if (cart.idSelected) {
						num += cart.count;
					}
				}
				return num;
			},
			getGoodsPrice(){
				let price = 0;
				for (const cart of this.cartList) {
					if (cart.idSelected) {
						price += cart.retailPrice*cart.count;
					}
				}
				return price;
			}
		}
	}
</script>

<style lang="stylus">
.cart
	.cartList
		.cartItem
			position: relative
			height: 172rpx
			width: 100%
			margin-top: 20rpx
			background-color: #f5f5f5
			padding: 20rpx
			display: flex
			.iconfont
				width: 40rpx
				height: 40rpx
				margin: auto 0
			.goodsItem
				display: flex
				image
					width: 172rpx
					height: 172rpx
					background-color: #ccc
					margin: 0 40rpx
				.goodsInfo
					.name
						font-size: 26rpx
						margin: 10rpx 
					.price
						color: red
			.countCtrl
				position: absolute
				right: 60rpx
				bottom: 30rpx
				text
					border: 1px solid #ddd
					padding: 8rpx 28rpx 
					&:nth-child(2)
						border: none
						border-top: 1px solid #ddd
						border-bottom: 1px solid #ddd
	.footer
		position: Fixed
		bottom: 0rpx
		display: flex
		height: 120rpx
		width: 100%
		background-color: #f5f5f5
		line-height: 120rpx
		text-align: center
		.left
			width: 30%
			.iconfont
					width: 30rpx
					height: 30rpx
					margin: auto 10rpx
		.right
			display: flex
			width: 70%
			text-align: center
			line-height: 120rpx
			.btn
				display: block
				flex: 1
			.order
				background-color: red
				
			
</style>
